<script setup>
import { ref } from 'vue';
import Basic from './Basic';
import Basic2 from './Basic2';
import UserCom from './User';
import Goods from './Goods';
import Pay from './Pay';
import Son from './Son';
import ContractCom from './Contract';
import SettleCom from './Settle';
import Deliver from '../Deliver';
import { service } from '@utils';
import { usePremission } from '@hooks';

const props = defineProps({
    statuss: Array,
    expressMethods: Array,
    expressCompanys: Array,
    yesNo: Array,
    sonStatuss: Array,
    newOrOldData:Array
});
const visible = ref(false);
const data = ref();
const user = ref();
const contract = ref();
const settle = ref();

const deliverRef = ref();

const premission = usePremission({
    wuliu: 'logistics:info:getLogisticsNode',
});

const open = async value => {
    getGoodsDetail(value.orderId);
    visible.value = true;
    // getUser()
    // getContract()
    // getSettle()
};

const close = () => {
    visible.value = false;
    data.value = null;
    user.value = null;
    contract.value = null;
    settle.value = null;
};
const getGoodsDetail = async id => {
    const res = await service.bfqz.cancelOrderDetail({ orderId: id });
    data.value = res.data;
};
const getUser = async () => {
    const res = await service.bfqz.userInfoAll(data.value.userId);
    user.value = res;
};

const getContract = async () => {
    const res = await service.bfqz.contractByOrder(data.value.id);
    contract.value = res;
};

const getSettle = async () => {
    const res = await service.bfqz.settleByOrder(data.value.id);
    if (res && res.id) {
        settle.value = res;
    }
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <el-dialog custom-class="dialogDiv" v-model="visible" title="详情" center @close="close" :lock-scroll="false" :fullscreen="true" destroy-on-close :width="900">
        <el-tabs type="card" class="demo-tabs" v-if="data">
            <el-tab-pane label="订单基本信息">
                <div class="titleText">
                    <p></p>
                    订单基本信息
                </div>
                <basic :data="data" :statuss="statuss" :expressMethods="expressMethods" :expressCompanys="expressCompanys" />
                <el-button v-if="(premission.wuliu && data.state == '8') || (premission.wuliu && data.state == '9') || (premission.wuliu && data.state == '12') || (premission.wuliu && data.state == '16') || (premission.wuliu && data.state == '17')" style="margin: 0 auto" type="primary" @click="deliverRef.open(data, 2)">查看物流详情</el-button>
                <div class="titleText" v-if="data.bizContract && data.bizContract.signStatus == 2">
                    <p></p>
                    合同信息
                </div>
                <contract-com v-if="data.bizContract && data.bizContract.signStatus == 2" :contract="data.bizContract" />
                <div class="titleText">
                    <p></p>
                    用户收货地址
                </div>
                <user-com v-if="data" :data="data" />
                <div class="titleText">
                    <p></p>
                    商品详情
                </div>
                <goods :data="data" :yesNo="yesNo" :newOrOldData="newOrOldData"/>
                <div class="titleText">
                    <p></p>
                    订单支付信息
                </div>
                <pay :data="data" />
                <div class="titleText" v-if="settle">
                    <p></p>
                    结算单信息
                </div>
                <settle-com v-if="settle" :settle="settle" />
                <div class="titleText" v-if="data.state *1 > 7 && data.state != 14 && data.state != 15">
                    <p></p>
                    交付确认单
                </div>
                <Basic2 :data="data"  v-if="data.state *1 > 7 && data.state != 14 && data.state != 15"/>
            </el-tab-pane>
            <!-- <el-tab-pane v-if="contract && contract.state == 1" :label="'合同信息' + contract.state">
                <contract-com v-if="data" :contract="contract"/>
            </el-tab-pane>
            <el-tab-pane label="用户收货地址">
                <user-com v-if="data" :data="data"/>
            </el-tab-pane>
            <el-tab-pane label="商品详情">
                <goods :data="data" :yesNo="yesNo" />
            </el-tab-pane>
            <el-tab-pane label="订单支付信息">
                <pay :data="data" />
            </el-tab-pane>
            <el-tab-pane v-if="settle" label="结算单信息">
                <settle-com :settle="settle" />
            </el-tab-pane> -->
            <el-tab-pane label="子订单信息">
                <son :data="data" :statuss="sonStatuss" />
            </el-tab-pane>
            <!-- <el-tab-pane label="交付确认单" v-if="data.state - 0 > 7 && data.state != 14 && data.state != 15">
                <Basic2 :data="data"  />
            </el-tab-pane> -->
        </el-tabs>
        <Deliver ref="deliverRef" :data="data" :showBuyPriceValue="2" />
    </el-dialog>
</template>
<style lang="scss">
.dialogDiv {
    display: flex !important;
    flex-direction: column !important;
    .el-dialog__body {
        flex: 1;
        overflow: hidden;
        .el-tabs {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    }
}
</style>
<style lang="scss" scoped>
.titleText {
    text-indent: 10px;
    height: 20px;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin: 20px 0;
    p {
        width: 4px;
        height: 100%;
        background: #ff554b;
        display: inline-block;
        border-radius: 5px;
    }
}
// :deep(.el-dialog__body) {
//     flex: 1;
//     overflow: hidden;
// }
// :deep(.el-tabs) {
//     height: 100%;
//     display: flex;
//     flex-direction: column;
// }
:deep(.el-tabs__header) {
    padding-bottom: 20px;
    border-bottom: 1px solid #e4e4e4 !important;
}
:deep(.el-tabs__nav) {
    // border-bottom: 1px solid #FF554B !important;
    border: none !important;
}
:deep(.el-tabs__item) {
    // height: 30px !important;
    // line-height: 30px !important;
    border: 1px solid #ff554b !important;
    border-right: none !important;
    color: #343840;
}
:deep(.el-tabs__item:first-child) {
    border-right: 1px solid #ff554b !important;
    border-radius: 4px 0 0 4px !important;
}
:deep(.el-tabs__item:last-child) {
    border-right: 1px solid #ff554b !important;
    border-radius: 0 4px 4px 0 !important;
}
:deep(.el-tabs__item:hover) {
    color: #303133;
}
:deep(.is-active) {
    background: #ff554b;
    color: #fff;
}
:deep(.is-active:hover) {
    color: #fff;
}
:deep(.el-tabs__content) {
    overflow: auto;
}
</style>
